<template>
  <div
    class="head-avatar"
    :class="{ 'need-point': point }"
    :style="`width: ${width}px; height: ${height}px`"
  >
    <nuxt-link v-if="to" :target="openTarget" :to="to">
      <img :src="img || 'https://image.zdxblog.cn/picture/16849805191921684980519192.png'" alt="avatar" />
    </nuxt-link>
    <img
      v-else
      :src="img || 'https://image.zdxblog.cn/picture/16849805191921684980519192.png'"
      alt="avatar"
    />
  </div>
</template>

<script>
export default {
  name: 'AvatarHead',
  props: {
    to: {
      type: String,
      default: ''
    },
    width: {
      type: Number,
      default: 45
    },
    height: {
      type: Number,
      default: 45
    },
    img: {
      type: [String, null, undefined],
      default: ''
    },
    openTarget: {
      type: String,
      default: '_blank'
    },
    point: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {}
  }
}
</script>

<style lang="less" scoped>
.head-avatar {
  position: relative;
  flex-shrink: 0;
  a {
    display: block;
    height: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 50%;
    img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  & > img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
  }
  &.need-point {
    &:after {
      content: '';
      position: absolute;
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #ff0000;
      top: -6px;
      right: 0;
    }
  }
}
</style>
